<template>
	<view>
		<!-- 添加账单记录 -->
		<uni-popup ref="pop" type="bottom" background-color="rgba(0,0,0,0)" @change="onChange">
			<view style="background-color: #fff;border-radius: 10px 10px 0 0">
				<view class="p-24r">
					<scroll-view>
						<view @touchmove.stop @touch.stop class="flex flex-wrap my-10 py-3"
							style="overflow: scroll;row-gap: 4px;" :style="{height:typeList.length>6?'210px':'104px'}">
							<view v-for="item in typeList" class="flex flex-column items-center basis-1/5"
								@click="chooseType(item)">
								<text class="iconfont rounded-50p p-12 mb-4" style="font-size: 24px"
									:style="{color:item.id === activeType? 'white':'black',backgroundColor:item.id===activeType?type===1? systemTheme.inColor: systemTheme.outColor:'rgba(238, 238, 238,.4)'}"
									:class="item.icon"></text>
								<text class="text-12 text-999">{{ item.title }}</text>
							</view>
						</view>
					</scroll-view>
					<!-- 时间，备注，图片 -->
				</view>
				<view class="flex items-center justify-between pt-6 pl-10 pr-10" style="background-color: #F7F7F7;">
					<view class="text-64r" :style="{color:money===''?'#999':'#333'}" style="font-weight: bold">
						{{ money === '' ? '0.00' : money }}
					</view>
				</view>
				<view class="basis-2/4 flex flex-wrap">
					<monokeyboard :value="money" :show="true" :btnColor="keyboardColor" :isDecimal="true"
						confirmText="确定" @change="get_number" @confirm="handleSave()">
					</monokeyboard>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		useTypeStore
	} from '@/store/type';
	import imageTools from '@/uni_modules/niceui-image-tools/util/image-tools.js'
	import monokeyboard from '@/components/keyboard/mono-keyboard.vue'
	import {
		useSystem
	} from "@/store/theme";
	import KDatePicker from "../../components/k-date-picker/KDatePicker.vue";
	import dayjs from 'dayjs'
	import {
		getAssetList,
	} from '@/api/api.js'
	import {
		formatMoney
	} from '@/common/format.js'


	export default {
		name: "setAccount",
		components: {
			monokeyboard,
			KDatePicker
		},
		props: {
			// 是否显示popup
			visible: {
				type: Boolean,
				default: false
			},
			// 类型对象，type,icon
			typeObj: {
				type: Object,
				default: () => {},
			},
			// 修改or添加
			isUpdate: {
				type: Boolean,
				default: false
			},
			// 账单记录对象
			record: {
				type: Object,
				default: () => {},
			}
		},
		// 父组件visible置false
		emits: ['close', 'updateConfirm'],
		computed: {
			showDate() {
				return dayjs(this.datePickerValue).format('MM-DD')
			},
			money() {
				const str = this.moneyArr.join('')
				if (str) {
					return str
				}
				return ''
			},
			typeList() {
				return this.type ? this.typeStore.inType : this.typeStore.payType
			},
			keyboardColor() {
				return this.type === 0 ? this.systemTheme.outColor : this.systemTheme.inColor
			}
		},
		data() {
			return {
				activeType: '',
				activeTypeName: '',
				showDatePicker: false,
				datePickerValue: 0,
				timeValueStr: '', // HH:mm:ss
				moneyArr: [],
				remark: '',
				type: 0,
				isShow: false,
				base64Str: '',
				title: '',
				id: null,
				assetList: [],
				allAsset: [],
				assetTypeId: null,
				nowMoney: 0
			};
		},
		watch: {
			visible(val) {
				if (val) {
					this.$refs.pop.open()
				} else {
					this.$refs.pop.close()
				}
			}
		},

		setup() {
			const typeStore = useTypeStore()
			const systemTheme = useSystem()
			return {
				typeStore,
				systemTheme
			}
		},
		methods: {
			formatMoney(num) {
				return formatMoney(num)
			},
			get_number(e) {
				this.moneyArr = [...e]
			},
			// popup弹出初始化内容
			onChange(e) {
				if (e.show) {
					if (this.isUpdate) {
						this.updateInit()
					} else {
						this.addInit()
					}
				} else {
					this.showDatePicker = false
					this.$emit('close')
				}
			},
			// 初始化添加内容
			addInit() {
				this.moneyArr.splice(0);
				this.remark = '';

				// 默认取类目的第一个
				if (this.typeStore.payType != null) {
					this.activeType = this.typeStore.payType[0].id;
					this.activeTypeName = this.typeStore.payType[0].icon;
					this.type = this.typeStore.payType[0].type
				}
				this.datePickerValue = new Date().getTime()
				this.timeValueStr = dayjs(this.datePickerValue).format('HH:mm:ss')
				this.base64Str = ''
			},
			// 初始化编辑内容
			updateInit() {
				this.moneyArr = this.record.num.toString().split('');
				this.remark = this.record.remark;
				this.activeType = this.record.type_id;
				this.activeTypeName = this.record.icon;
				this.datePickerValue = dayjs(this.record.create_time, 'YYYY-MM-DD HH:mm:ss').valueOf()
				this.timeValueStr = this.record.create_time.split(' ')[1]
				this.type = this.record.type;
				this.base64Str = this.record.image;
				this.title = this.record.title
				this.id = this.record.id
				this.assetTypeId = this.record.asset_type_id
			},
			getAssetName(id) {
				if (id) {
					const item = this.allAsset.filter(item => item.id == id)
					if (item && item.length > 0) {
						return item[0].type_title
					}
				} else {
					''
				}
			},
			handleAsset(item) {
				this.assetTypeId = item.id
				this.nowMoney = item.num
				uni.setStorageSync('last_asset_id', item.id);
				this.$refs.popup.close()
			},
			// 保存
			async handleSave() {
				if (this.moneyArr.length === 0) {
					uni.showToast({
						title: '请输入金额',
						icon: 'error'
					})
					return
				}
				if (!this.title) {
					uni.showToast({
						title: '请选择类型',
						icon: 'error'
					})
					return
				}
				const obj = {
					num: parseFloat(this.money),
					type_id: this.activeType,
					remark: this.remark,
					create_time: dayjs(this.datePickerValue).format('YYYY-MM-DD HH:mm:ss'),
					icon: this.activeTypeName,
					title: this.title
				}

				if (this.id != null) {
					obj.id = parseInt(this.id)
				}

				await this.$emit('updateConfirm', obj)
			},
			async handleAssetShow() {

				this.$refs.popup.open('bottom')
			},
			// 展开时间选择器
			handlePickerShow() {
				this.showDatePicker = true
			},
			// 选择时间
			handleConfirm(e) {
				if (typeof e === 'number' && !isNaN(e)) {
					this.datePickerValue = e;
				}
			},
			// 取消选择时间
			handleCancel() {
				this.showDatePicker = false
			},
			// chooseType
			chooseType(obj) {
				this.activeType = obj.id
				this.activeTypeName = obj.icon
				this.title = obj.title
			},
			// chooseImg
			chooseImg() {
				const self = this;
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: async function(res) {
						const filePath = res.tempFilePaths[0];
						imageTools.pathToBase64(filePath).then(base64 => {
								self.base64Str = base64
							})
							.catch(error => {
								console.error(error)
							})
					}
				});
			},
			delImage() {
				this.base64Str = ''

			}
		}
	}
</script>

<style lang="scss">
	.picker-text {
		background-color: #fff;
		padding: 3px 15px;
		border-radius: 14px;
	}

	.popup-asset {
		width: 100%;
		background-color: #F7F7F7;
		padding-bottom: 20px;
		border-radius: 10px 10px 0 0;
		max-height: 60vh;
		overflow-y: auto;


		.popup-asset-titel {
			width: 100%;
			padding: 20px 10px 10px 10px;
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 10px;
			background-color: #fff;
		}

		.popup-asset-content {
			background-color: #fff;
			padding: 10px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 10px;

			.popup-asset-item {
				margin-right: 10px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;

				// width: 250px;
				.item-title {
					max-width: 80px;
					text-overflow: ellipsis;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
				}
			}
		}
	}
</style>